<template>
	<div :style="{ backgroundColor: disabled ? 'rgba(255,255,255,.7)' : '', cursor: disabled ? 'not-allowed' : '' }" class="colorPicker">
		<div class="choose" :style="{ backgroundColor: disabled ? 'rgba(255,255,255,.7)' : '' }">
			<div class="color-picker" @click="open" :style="{ border: disabled ? '1px solid rgba(255,255,255,.7)' : '1px solid #999' }">
				<div class="color-picker__color" :style="{ backgroundColor: value, width: size, height: size }"></div>
				<div class="transparent" :style="{ backgroundImage: colorFormat == 'rgba' ? imageUrl : '', width: size, height: size, backgroundColor: disabled ? 'rgba(255,255,255,.7)' : '' }">
					<!-- <uni-icons :type="value ? 'bottom' : 'closeempty'" :size="iconSize" class="icon" :color="value ? '#fff' : ''" :style="{ color: disabled ? 'rgba(255,255,255,.7)' : '' }"></uni-icons> -->
				</div>
			</div>
		</div>
		<u-popup v-model="show" mode="bottom" border-radius="14" :closeable="true">
			<div class="color">
				<zebra-color-picker v-model="colors"></zebra-color-picker>
			</div>
			<div class="button-box">
				<div class="button" @click="onCancel">取消</div>
				<div class="button confirm" @click="onConfirm">确定</div>
			</div>
		</u-popup>
	</div>
</template>

<script>
export default {
	name: "vColorPicker",
	model: {
		prop: "value",
		event: "update:value",
	},
	data() {
		return {
			show: false,
			colors: {
				hex: "#194d33",
				hex8: "#194D33A8",
				hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
				hsv: { h: 150, s: 0.66, v: 0.3, a: 1 },
				rgba: { r: 25, g: 77, b: 51, a: 1 },
				a: 1,
			},
			hex8: "",
			imageUrl: `url("/static/transparent.png")`,
			size: "60rpx",
			iconSize: "16",
		}
	},
	props: {
		value: {
			type: String,
			default: "",
		},
		colorFormat: {
			type: String,
			default: "hex",
		},
		measure: {
			type: String,
			default: "medium",
		},
		disabled: {
			type: Boolean,
			default: false,
		},
	},

	methods: {
		open() {
			if (this.disabled) return
			this.show = true
		},
		onConfirm() {
			this.$emit("update:value", this.colors.hex8)
			this.show = false
		},
		onCancel() {
			this.show = false
		},
	},
	watch: {
		measure: {
			immediate: true,
			handler(val) {
				if (val == "small") {
					this.size = "50rpx"
					this.iconSize = "14"
				} else if (val == "medium") {
					this.size = "60rpx"
					this.iconSize = "16"
				} else if (val == "mini") {
					this.size = "40rpx"
					this.iconSize = "12"
				}
			},
		},
	},
}
</script>
<style lang="scss" scoped>
.colorPicker {
	margin: 10rpx;
}
.choose {
	border: 1px solid #eee;
	border-radius: 6rpx;
}
.color-picker {
	position: relative;
	border-radius: 6rpx;
	// border: 1px solid #999999;
	margin: 10rpx;
	.color-picker__color {
		position: relative;
		z-index: 3;
	}
	.transparent {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-size: auto;
	}
	.icon {
		position: absolute;
		top: 0;
		margin: 0, auto;
		z-index: 4;
	}
}
.color {
	padding: 100rpx 0 0rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.button-box {
	display: flex;
	justify-content: flex-end;
	margin: 20rpx 120rpx;
	.button {
		margin-right: 20rpx;
		padding: 5rpx 35rpx;
		border-radius: 10rpx;
		border: 1px solid #eee;
	}
	.confirm {
		background-color: #409eff;
		color: #fff;
	}
}
</style>
